<style lang="less">
  .search {
    .operation {
      margin-bottom: 2vh;
    }
    .select-count {
      font-size: 13px;
      font-weight: 600;
      color: #40a9ff;
    }
    .select-clear {
      margin-left: 10px;
    }
    .page {
      margin-top: 2vh;
    }
    .drop-down {
      font-size: 13px;
      margin-left: 5px;
    }
  }
</style>
<template>
  <div class="search">
    <Card :style="cardheight" ref="card" style="overflow: hidden; padding-left: 30px;padding-top: 20px">
      <Row>
        <Col span="8">
        <Row class="operation">
          <Button @click="addParentDept" style="margin-right: 5px">添加一级部门</Button>
          <Button @click="addDept" style="margin-right: 5px">添加下级部门</Button>
          <Button type="error" @click="delSelect">
            <Icon type="md-close" size="18"/>
            删除选中
          </Button>
        </Row>
        <Row>
          <Col span="6">
          <mm-tree :data="data" @OnSelectChange="OnSelectChange" @dom="dom"></mm-tree>
          </Col>
        </Row>
        </Col>
        <Col span="16" style="border-left: solid 0.5px;padding-left: 50px">
        <!--</div>-->

        <h1>部门详细信息</h1><br>
        <Row type="flex" justify="start" class="code-row-bg">
          <Col span="8">
          <Form :model="mmTreeData" ref="gridForm" label-position="top" :rules="formValidate">
            <Row style=";margin-bottom: 15px">
              <Col :span="24">
              <!--<FormItem label="上级部门(不可被修改)" prop="parentname">-->
              上级部门：{{mmTreeData.parentname}}
              <!--<Input v-model="mmTreeData.parentname" type="text" :readonly="isReadonly"/>-->
              <!--</FormItem>-->
              </Col>
            </Row>
            <Row>
              <Col :span="24">
              <FormItem label="编号" prop="code">
                <Input v-model="mmTreeData.code" type="text"/>
              </FormItem>
              </Col>
            </Row>
            <Row>
              <Col :span="24">
              <FormItem label="名称" prop="title">
                <Input v-model="mmTreeData.title" type="text"/>
              </FormItem>
              </Col>
            </Row>
            <Row>
              <Col :span="24">
              <FormItem label="备注" prop="memo">
                <Input v-model="mmTreeData.memo" type="textarea" height="200"/>
              </FormItem>
              </Col>
            </Row>
            <Form-item>
              <Button @click="submitEdit" :loading="submitLoading" type="primary" icon="ios-brush"
                      style="margin-right: 5px;padding-left: 5px;padding-right: 8px">修改
              </Button>
              <!--<Button @click="handleReset">重置</Button>-->
            </Form-item>

          </Form>
          </Col>
        </Row>
        </Col>
      </Row>
    </Card>

    <Modal :title="modalTitle" v-model="gridModalVisible" :mask-closable='false' width="400">
      <Form ref="gridFormAdd" :model="gridFormAdd">
        <Row v-if="!isParentDept">
          上级部门：{{gridFormAdd.parentname}}
          <!--<Col :span="24">-->
          <!--<FormItem label="上级部门" prop="parentid">-->
          <!--{{gridFormAdd.parentname}}-->
          <!--</FormItem>-->
          <!--</Col>-->
        </Row>
        <Row>
          <Col :span="24">
          <FormItem label="编号" prop="code">
            <Input v-model="gridFormAdd.code" type="text"/>
          </FormItem>
          </Col>
        </Row>
        <FormItem label="部门名称" prop="title">
          <Input v-model="gridFormAdd.title"/>
        </FormItem>
        <FormItem label="备注" prop="">
          <Input v-model="gridFormAdd.memo" type="textarea" height="200"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancelAdd">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submitAdd" icon="ios-paper-plane">提交</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
  import {getOrgList, saveOrg, delOrg} from '@/api/data'
  import mmTree from '../../components/mmTree/mmTree.vue';
  export default {
    components: {
      mmTree
    },
    data() {
      return {
        isReadonly: true,
        loading: true,
        modalType: 0,
        gridModalVisible: false,
        modalTitle: '',
        isParentDept: false,
        gridForm: {
          id: '',
          parentid: '',
          name: '',
          level: '',
          parentname: '',
          code: ''
        },
        gridFormAdd: {
          id: '',
          code: '',
          title: '',
          parentid: '',
          memo: ''
        },
        formValidate: {
          name: [{required: true, message: '名称不能为空', trigger: 'blur'}]
        },
        submitLoading: false,
        data: [],
        cardheight: '',
        mmTreeData: {},
        changeFormData: {},
        dome:{}
      }
    },
    methods: {
      //mmTree传来值
      OnSelectChange(data) {
        this.mmTreeData = data;
      },
      dom(e){
        this.dome = e;
      },
      //初始化页面
      init() {
        this.getAllList();
        this.mmTreeData = {};
        this.changeFormData = {};
        this.cardheight = window.innerHeight - this.$refs.card.$el.offsetTop + 300 + 'px';
      },
      //获取部门机构树
      getAllList() {
        this.loading = true
        getOrgList().then(res => {
          this.loading = false
          let data = res.data
          if (data.code === 200) {
            this.data = data.data
          }
        }).catch(err => {
          console.log(err)
        })
      },
      //增加一级部门
      addParentDept() {
        this.gridFormAdd = {
          id: '',
          code: '',
          title: '',
          memo: '',
          parentid: '0'
        }
        this.modalTitle = '添加一级部门';
        this.isParentDept = true
        this.gridModalVisible = true
      },
      //增加下级部门
      addDept() {
        if (Object.keys(this.mmTreeData).length == 0) {
          this.$Message.warning('请先点击选择部门')
          return
        }

        this.gridFormAdd = {
          parentid: this.mmTreeData.id,
          parentname: this.mmTreeData.title,
          id: '',
          code: '',
          title: '',
          memo: ''
        }
        this.modalTitle = '添加下级部门';
        this.isParentDept = false
        this.gridModalVisible = true
      },
      //删除部门
      delSelect() {
        if (Object.keys(this.mmTreeData).length == 0) {
          this.$Message.warning('您还未选择要删除的数据')
          return
        }
        this.$Modal.confirm({
          title: '确认删除',
          content: '您确认要删除所选的数据吗?',
          onOk: () => {
            let ids = this.mmTreeData.id;
            delOrg(ids).then(res => {
              this.$Message.success('删除成功')
              this.init()
            }).catch(err => {
              console.log(err)
            })
          }
        })
      },
      //修改按钮
      submitEdit(e) {
        this.$refs.gridForm.validate(valid => {
          if (valid) {
            if (Object.keys(this.mmTreeData).length == 0) {
              this.$Message.warning('请先点击选择要修改的菜单节点')
              return
            }
            this.submitLoading = true
            saveOrg(this.mmTreeData).then(res => {
              this.submitLoading = false
              this.$Message.success('修改成功')
              this.dome.target.parentNode.className='ivu-tree-title';
              this.init()


            }).catch(err => {
              console.log(err)
            })
          }
        })
      },

      cancelAdd() {
        this.gridModalVisible = false
      },
      submitAdd() {
        this.$refs.gridFormAdd.validate(valid => {
          if (valid) {
            this.submitLoading = true
            saveOrg(this.gridFormAdd).then(res => {
              this.submitLoading = false
              this.$Message.success('添加成功')
              this.dome.target.parentNode.className='ivu-tree-title';
              this.init()
              this.gridFormAdd = {
                id: '',
                code: '',
                title: '',
                memo: '',
                parentid: ''
              }
              this.gridModalVisible = false

            }).catch(err => {
              console.log(err)
            })
          }
        })
      },
      handleReset() {
        this.mmTreeData = this.changeFormData
      },
      selectTree(v) {
        console.log(v)
        if (v.length > 0) {
          for (let attr in v[0]) {
            if (v[0][attr] === null) {
              v[0][attr] = ''
            }
          }
          let str = JSON.stringify(v[0])
          let grid = JSON.parse(str)
          this.gridForm = grid
        }
      },
    },
    mounted() {
      this.init()
    },


  }
</script>
